<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{.name}}</title>
    <script src="/static/echarts.js"></script>
</head>
<body>

{% include "header.html" %}

<table>
    <tr>
        <td valign="top">
            <table border="0" cellspacing="10" cellpadding="0">
                <tr>
                    <td><b>基金编码：</b></td>
                    <td>{{code}}</td>
                </tr>
                <tr>
                    <td><b>基金名称：</b></td>
                    <td>{{info.fund.name}}</td>
                </tr>
                <tr>
                    <td><b>基金类型：</b></td>
                    <td>{{info.fund.type}}</td>
                </tr>
                <tr>
                    <td><b>累计收益：</b></td>
                    <td>{{info.totalIncome}}</td>
                </tr>
                <tr>
                    <td><b>持有份额：</b></td>
                    <td>{{info.curUnits}}</td>
                </tr>
                <tr>
                    <td><b>持有收益：</b></td>
                    <td>{{info.curIncome}} | {{info.curIncomeRate}}%</td>
                </tr>
                <tr>
                    <td><b>总成本：</b></td>
                    <td>{{lastDayIncome.totalCost}}</td>
                </tr>
                <tr>
                    <td><b>基金成本：</b></td>
                    <td>{{lastDayIncome.cost}}</td>
                </tr>
                <tr>
                    <td><b>基金价值：</b></td>
                    <td>{{totalPrice}}</td>
                </tr>
                <tr>
                    <td><b>最新价格：</b></td>
                    <td>{{lastDayIncome.date}} : {{lastDayIncome.jjjz}} | {{lastDayIncome.ljjz}} | {{lastDayIncome.rate}}%</td>
                </tr>

                <tr>
                    <td><b>1，3，5年收益率：</b></td>
                    <td>{{yearRate.year1}}% ，{{yearRate.year3}}% ，{{yearRate.year5}}%</td>
                </tr>

                <tr>
                    <td><b>每年收益率：</b></td>
                    <td>{% for item in civilYearRate %} {{item}}% {% endfor %} </td>
                </tr>

                <tr>
                    <td><b>最大回撤：</b></td>
                    <td>{{maxDrawDown}}%</td>
                </tr>

                <tr>
                    <td><b>月线/半年线/年线：</b></td>
                    <td>{{info.priceAvg1M}}/{{info.priceAvg6M}}/{{info.priceAvg1Y}}</td>
                </tr>
                <tr>
                    <td><b>购买监控：</b></td>
                    {% if monitorResult == 1 %}
                    <td><font color="red">{{monitorMaxRate}}% ({{monitorMaxDay}}) | {{monitorMinRate}}% ({{monitorMinDay}}) </font></td>
                    {% else %}
                    {% if monitorResult == 2 %}
                    <td><font color="gold">{{monitorMaxRate}}% ({{monitorMaxDay}}) | {{monitorMinRate}}% ({{monitorMinDay}}) </font></td>
                    {% else %}
                    <td>{{monitorMaxRate}}% ({{ monitorMaxDay|date:"Y-m-d" }}) | {{monitorMinRate}}% ({{ monitorMinDay|date:"Y-m-d" }})</td>
                    {% endif %}
                    {% endif %}
                </tr>
                
                
            </table>
        </td>
        <td><div id="costList" style="width: 600px;height:400px;"></div></td>
    </tr>
    <tr>
        <td><div id="monthIncome" style="width: 600px;height:400px;"></div></td>
        <td><div id="main" style="width: 600px;height:400px;"></div></td>
    </tr>
</table>
</body>
</html>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '历史增长数据'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['基金净值','累计净值']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                {% for item in incomeLstData %}
                '{{item.date}}',
                {% endfor %}
                ]
        },
        yAxis: {
            type: 'value',
            min: function(v) { return v.min - v.min * 0.01; },
            max: function(v) { return v.max + v.max * 0.01; },
        },
        series: [
            {
                name:'基金净值',
                type:'line',
                stack: '总量',
                data:[
                    {% for item in incomeLstData %}
                    '{{item.jjjz}}',
                    {% endfor %}
                    ]
            },
            {
                name:'累计净值',
                type:'line',
                data:[
                    {% for item in incomeLstData %}
                    '{{item.ljjz}}',
                    {% endfor %}
                    ]
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('costList'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '成本',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['成本','资产']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : [
                        {% for item in incomeLstData %}
                        '{{item.date}}',
                        {% endfor %}
                        ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'成本',
                type:'bar',
                data:[
                    {% for item in incomeLstData %}
                    '{{item.totalCost}}',
                    {% endfor %}
                    ],
            },
            {
                name:'资产',
                type:'bar',
                data:[
                    {% for item in incomeLstData %}
                    '{% widthratio item.jjjz 1 item.units %}',
                    {% endfor %}
                    ],
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>



<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('monthIncome'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '月收益',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['收益','月份']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : [
                    {% for item in incomeMonth %}
                    '{{item.date}}',
                    {% endfor %}
                    ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'收益',
                type:'bar',
                data:[
                    {% for item in incomeMonth %}
                    '{{item.income}}',
                    {% endfor %}
                    ],
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
